<%@include file="../base/include.jsp"%>

<link rel='stylesheet' type='text/css' href="<c:url value='/web-resources/js/plugin/fullcalendar/fullcalendar.css'/>" />
<script type='text/javascript' src="<c:url value='/web-resources/js/plugin/fullcalendar/fullcalendar.min.js'/>"></script>

<script type='text/javascript'>
	$(document).ready(function() {
		getEvents();
	});

	//http://arshaw.com/fullcalendar/docs/usage/
	function getEvents() {
		var eventType = $('#eventFilter').val();

		$('#calendar').empty();
		$('#calendar').fullCalendar({
			defaultView : 'basicWeek',
			height : 200,
			header : {
				left : 'prev,next today',
				center : 'title',
				right : ''
			},
			timeFormat : 'HH:mm{ - HH:mm}',
			editable : false,
			events : {
				url : applicationName + '/event/get/?type=' + eventType
			}

		});
	}
</script>

<div class="well actionbar">
	<select id="eventFilter" onchange="getEvents();">
		<option value="2">Public &amp; User</option>
		<option value="1">Public</option>
		<option value="0">User</option>
	</select>
	<a href="<c:url value="/profile/calendar"/>" >Edit calendar</a>
	<div class="row-fluid">
		<div id='calendar'></div>
	</div>
</div>